<div class="uploadImg">
  <div class="top">
    <div class="bigImg">
      <img #image [src]="base64String">
    </div>
    <!-- scale	rotate	flipH	flipV -->
    <div class="smallImg">
      <img [src]="croppedImage" />
      <button nz-button [nzType]="'primary'" (click)="handleUpload()" [nzLoading]="uploading">
        {{ uploading ? '保存中' : '保存' }}
      </button>
    </div>
  </div>
  <div class="bottom">
    <nz-upload [nzBeforeUpload]="beforeUpload" class="historyno">
      <button nz-button nzType="primary" nzValue="small"> 上传图片</button>
    </nz-upload>

    <div class="icon">
      <i class="iconfont icon-arrow-go-back-line" nzTooltipTitle="逆时针" nz-tooltip nzTooltipPlacement="top"
        (click)="anticlockwise()"> </i>
      <i class="iconfont icon-arrow-go-forward-line" nzTooltipTitle="顺时针" nz-tooltip nzTooltipPlacement="top"
        (click)="clockwise()"> </i>
      <i class="iconfont icon-zoom-in-line" nzTooltipTitle="放大" nz-tooltip nzTooltipPlacement="top" (click)="big()">
      </i>
      <i class="iconfont icon-zoom-out-line" nzTooltipTitle="缩小" nz-tooltip nzTooltipPlacement="top" (click)="small()">
      </i>
      <i class="iconfont icon-refresh-line" nzTooltipTitle="复原" nz-tooltip nzTooltipPlacement="top" (click)="reset()">
      </i>
      <!-- <i class="iconfont icon-crop-line" nzTooltipTitle="裁剪" nz-tooltip nzTooltipPlacement="top" (click)="crop()">
      </i> -->

    </div>
  </div>
</div>